<template>
  <div ref="editContainer" class="code-editor"></div>
</template>

<script lang="ts">
import { getCurrentInstance, onMounted, watch } from 'vue';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js';

export default {
  props: {
    value: String,
    language: String,
    readOnly: Boolean
  },
  setup(props, { emit }) {
    let monacoEditor = null;
    const { proxy } = getCurrentInstance();

    watch(
        () => props.value,
        (value) => {
          // 防止改变编辑器内容时光标重定向
          if (value !== monacoEditor?.getValue()) {
            monacoEditor.setValue(value);
          }
        },
    );

    onMounted(() => {
      monacoEditor = monaco.editor.create(proxy.$refs.editContainer, {
        value: props.value,
        readOnly: props.readOnly,
        language: props.language,
        theme: 'vs-dark',
        selectOnLineNumbers: true,
        renderSideBySide: false,
      });
      // 监听值变化
      monacoEditor.onDidChangeModelContent(() => {
        const currenValue = monacoEditor?.getValue();
        emit('update:value', currenValue);
      });
    });
    return {};
  },
};
</script>

<style scoped>
.code-editor {
  width: 100%;
  min-height: 100px;
}
</style>
